<template>
  <div>
    <!-- computed里的函数在页面中调用时不加小括号 -->
    <h1>{{reverseStr}}</h1>
    <h1>{{reverseStr}}</h1>
    <h1>{{reverseStr}}</h1>
    <!-- 上面三个只打印一次   计算属性执行了 -->
    <!-- -------- -->
    <!-- methods里的函数在页面中调用时不加小括号 -->
    <h1>{{Fn()}}</h1>
    <h1>{{Fn()}}</h1>
    <h1>{{Fn()}}</h1>
    <!-- 上面三个打印三次  函数Fn执行了 -->
    <!-- -------- -->
    <!-- 此时若去浏览器的vue里改uname的数据，还是一样，
    上面的一次，下面的三次 -->
  </div>
</template>

<script>
  export default {
    data(){
      return {
        uname:'harry'
      }
    },
    computed:{
      //computed和data同级，是个对象
      //可根据现有的数据，去计算出新的数据
      //和methods的区别：有缓存，
      //在数据不发生变化的情况下，只执行一次
      reverseStr(){
        console.log('计算属性执行了');
        //这里一定要有返回值，把return注释掉就报错
        //uname的值不变，因为js中没有改变字符串的方法(改变数组的有7个常用的)
        return '222'+this.uname.split('').reverse().join('')
      },
      
    },
    methods:{
      Fn(){
        console.log('函数Fn执行了');
        return '222'+this.uname.split('').reverse().join('')
      },
      
    }
    //因为data、computed、methods里的都是挂载在当前实例上的
    //所以命名不能重复
  }
</script>

<style>

</style>